“Octavius” Documentation by “IG_design” v1.0
“Octavius”
Created: 01/05/2014
By: Ivan Grozdic aka IG_design
Email: ivang.design@yahoo.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Table of Contents
B) CSS Files and Structure - top
This theme uses css files contained in the css folder
Css files:
base
layout
font-awesome
skeleton
Css file layout:
Menu:
#nav-menu{
position:fixed;
top:0;
left:0;
z-index:3000;
width:100%;
}
.icon-team, .icon-blog, .icon-home, .icon-portfolio, .icon-services, .icon-contact, .icon-menu {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-team:before {
content: "\e000";
}
.icon-blog:before {
content: "\e001";
}
.icon-home:before {
content: "\e002";
}
.icon-portfolio:before {
content: "\e003";
}
.icon-services:before {
content: "\e004";
}
.icon-contact:before {
content: "\e005";
}
.icon-menu:before {
content: "\f0c9";
}
a, li {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Global CSS that are applied for all screen sizes */
.nav ul {
max-width: 100%;
margin: 0;
padding: 0;
list-style: none;
font-size: 1.2em;
font-weight: 300;
}
.nav li span {
display: block;
}
.nav a {
display: block;
color: rgba(249, 249, 249, .9);
text-decoration: none;
-webkit-transition: color .5s, background .5s, height .5s;
-moz-transition: color .5s, background .5s, height .5s;
-o-transition: color .5s, background .5s, height .5s;
-ms-transition: color .5s, background .5s, height .5s;
transition: color .5s, background .5s, height .5s;
}
.nav i{
/* Make the font smoother for Chrome */
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Remove the blue Webkit background when element is tapped */
a, button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* Hover effect for the whole navigation to make the hovered item stand out */
.no-touch .nav ul:hover a {
color: rgba(249, 249, 249, .5);
}
.no-touch .nav ul:hover a:hover {
color: rgba(249, 249, 249, 0.99);
}
/* Adding some background color to the different menu items */
.nav li:nth-child(6n+1) {
background: rgba(40, 40, 40,.9);
}
.nav li:nth-child(6n+2) {
background: rgba(45, 45, 45,.9);
}
.nav li:nth-child(6n+3) {
background: rgba(50, 50, 50,.9);
}
.nav li:nth-child(6n+4) {
background: rgba(55, 55, 55,.9);
}
.nav li:nth-child(6n+5) {
background: rgba(60, 60, 60,.9);
}
.nav li:nth-child(6n+6) {
background: rgba(65, 65, 65,.9);
}
/* For screen bigger than 800px */
@media (min-width: 50em) {
/* Transforms the list into a horizontal navigation */
.nav li {
float: left;
width: 16.66666666666667%;
text-align: left;
-webkit-transition: border .5s;
-moz-transition: border .5s;
-o-transition: border .5s;
-ms-transition: border .5s;
transition: border .5s;
}
.nav a {
display: block;
width: auto;
}
/* hover, focused and active effects that add a little colored border to the different items */
.no-touch .nav li:nth-child(6n+1) a:hover,
.no-touch .nav li:nth-child(6n+1) a:active,
.no-touch .nav li:nth-child(6n+1) a:focus {
border-bottom: 4px solid #EC572C;
}
.no-touch .nav li:nth-child(6n+2) a:hover,
.no-touch .nav li:nth-child(6n+2) a:active,
.no-touch .nav li:nth-child(6n+2) a:focus {
border-bottom: 4px solid #EC572C;
}
.no-touch .nav li:nth-child(6n+3) a:hover,
.no-touch .nav li:nth-child(6n+3) a:active,
.no-touch .nav li:nth-child(6n+3) a:focus {
border-bottom: 4px solid #EC572C;
}
.no-touch .nav li:nth-child(6n+4) a:hover,
.no-touch .nav li:nth-child(6n+4) a:active,
.no-touch .nav li:nth-child(6n+4) a:focus {
border-bottom: 4px solid #EC572C;
}
.no-touch .nav li:nth-child(6n+5) a:hover,
.no-touch .nav li:nth-child(6n+5) a:active,
.no-touch .nav li:nth-child(6n+5) a:focus {
border-bottom: 4px solid #EC572C;
}
.no-touch .nav li:nth-child(6n+6) a:hover,
.no-touch .nav li:nth-child(6n+6) a:active,
.no-touch .nav li:nth-child(6n+6) a:focus {
border-bottom: 4px solid #EC572C;
}
/* Placing the icon */
.nav li span,
.nav li span.icon {
display: inline-block;
}
.icon {
padding-top: 1em;
padding-left: 1em;
}
.icon + span {
margin-top: 1.1em;
padding-left: 0.5em;
font-size: 0.8em;
-webkit-transition: margin .5s;
-moz-transition: margin .5s;
-o-transition: margin .5s;
-ms-transition: margin .5s;
transition: margin .5s;
}
/* Animating the height of the element*/
.nav a {
height: 3.5em;
}
.no-touch .nav a:hover ,
.nav a:active ,
.nav a:focus {
height: 4em;
}
/* Making the text follow the height animation */
.no-touch .nav a:hover .icon + span {
margin-top: 2.2em;
-webkit-transition: margin .5s;
-moz-transition: margin .5s;
-o-transition: margin .5s;
-ms-transition: margin .5s;
transition: margin .5s;
}
/* Positioning the icons and preparing for the animation*/
.nav i {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0.4em;
border-radius: 50%;
font-size: 0.8em;
box-shadow: 0 0 0 30px transparent;
background: rgba(255,255,255,0.1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
-ms-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out;
}
/* Animate the box-shadow to create the effect */
.no-touch .nav a:hover i,
.no-touch .nav a:active i,
.no-touch .nav a:focus i {
box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
-webkit-transition: box-shadow .4s ease-in-out;
-moz-transition: box-shadow .4s ease-in-out;
-o-transition: box-shadow .4s ease-in-out;
-ms-transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out;
}
}
@media (min-width: 50em) and (max-width: 61.250em) {
/* Size and font adjustments to make it fit into the screen*/
.nav ul {
font-size: 1em;
}
}
/* The "tablet" and "mobile" version */
@media (max-width: 49.938em) {
/* Instead of adding a border, we transition the background color */
.no-touch .nav ul li:nth-child(6n+1) a:hover,
.no-touch .nav ul li:nth-child(6n+1) a:active,
.no-touch .nav ul li:nth-child(6n+1) a:focus {
background: #292929;
}
.no-touch .nav li:nth-child(6n+2) a:hover,
.no-touch .nav li:nth-child(6n+2) a:active,
.no-touch .nav li:nth-child(6n+2) a:focus {
background: #292929;
}
.no-touch .nav li:nth-child(6n+3) a:hover,
.no-touch .nav li:nth-child(6n+3) a:active,
.no-touch .nav li:nth-child(6n+3) a:focus {
background: #292929;
}
.no-touch .nav li:nth-child(6n+4) a:hover,
.no-touch .nav li:nth-child(6n+4) a:active,
.no-touch .nav li:nth-child(6n+4) a:focus {
background: #292929;
}
.no-touch .nav li:nth-child(6n+5) a:hover,
.no-touch .nav li:nth-child(6n+5) a:active,
.no-touch .nav li:nth-child(6n+5) a:focus {
background: #292929;
}
.no-touch .nav li:nth-child(6n+6) a:hover,
.no-touch .nav li:nth-child(6n+6) a:active,
.no-touch .nav li:nth-child(6n+6) a:focus {
background: #292929;
}
.nav ul li {
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
-ms-transition: background 0.5s;
transition: background 0.5s;
}
}
/* CSS specific to the 2x3 columns version */
@media (min-width:32.5em) and (max-width: 49.938em) {
#nav-menu{
background: #fff;
}
/* Unhiding the styled menu link */
.nav .navtoogle{
margin: 0;
display: block;
}
/* Animating the height of the navigation when the button is clicked */
/* When JavaScript is disabled, we hide the menu */
.no-js .nav ul {
max-height: 30em;
overflow: hidden;
}
/* When JavaScript is enabled, we hide the menu */
.js .nav ul {
max-height: 0em;
overflow: hidden;
}
/* Displaying the menu when the user has clicked on the button*/
.js .nav .active + ul {
max-height: 30em;
overflow: hidden;
-webkit-transition: max-height .4s;
-moz-transition: max-height .4s;
-o-transition: max-height .4s;
-ms-transition: max-height .4s;
transition: max-height .4s;
}
/* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/
.nav li span {
display: inline-block;
height: 100%;
}
.nav a {
padding: 0.5em;
}
.icon + span {
margin-left: 1em;
font-size: 0.8em;
}
/* Adding a left border of 8 px with a different color for each menu item*/
.nav li:nth-child(6n+1) {
border-left: 8px solid rgba(236,87,44,.9);
}
.nav li:nth-child(6n+2) {
border-left: 8px solid rgba(236,87,44,.8);
}
.nav li:nth-child(6n+3) {
border-left: 8px solid rgba(236,87,44,.7);
}
.nav li:nth-child(6n+4) {
border-left: 8px solid rgba(236,87,44,.6);
}
.nav li:nth-child(6n+5) {
border-left: 8px solid rgba(236,87,44,.5);
}
.nav li:nth-child(6n+6) {
border-left: 8px solid rgba(236,87,44,.4);
}
/* make the nav bigger on touch screens */
.touch .nav a {
padding: 0.8em;
}
}
/* Adapting the font size and width for smaller screns*/
@media (min-width: 32.5em) and (max-width: 38.688em) {
#nav-menu{
background: #fff;
}
/* Unhiding the styled menu link */
.nav .navtoogle{
margin: 0;
display: block;
}
/* Animating the height of the navigation when the button is clicked */
/* When JavaScript is disabled, we hide the menu */
.no-js .nav ul {
max-height: 30em;
overflow: hidden;
}
/* When JavaScript is enabled, we hide the menu */
.js .nav ul {
max-height: 0em;
overflow: hidden;
}
/* Displaying the menu when the user has clicked on the button*/
.js .nav .active + ul {
max-height: 30em;
overflow: hidden;
-webkit-transition: max-height .4s;
-moz-transition: max-height .4s;
-o-transition: max-height .4s;
-ms-transition: max-height .4s;
transition: max-height .4s;
}
/* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/
.nav li span {
display: inline-block;
height: 100%;
}
.nav a {
padding: 0.5em;
}
.icon + span {
margin-left: 1em;
font-size: 0.8em;
}
/* Adding a left border of 8 px with a different color for each menu item*/
.nav li:nth-child(6n+1) {
border-left: 8px solid rgba(236,87,44,.9);
}
.nav li:nth-child(6n+2) {
border-left: 8px solid rgba(236,87,44,.8);
}
.nav li:nth-child(6n+3) {
border-left: 8px solid rgba(236,87,44,.7);
}
.nav li:nth-child(6n+4) {
border-left: 8px solid rgba(236,87,44,.6);
}
.nav li:nth-child(6n+5) {
border-left: 8px solid rgba(236,87,44,.5);
}
.nav li:nth-child(6n+6) {
border-left: 8px solid rgba(236,87,44,.4);
}
/* make the nav bigger on touch screens */
.touch .nav a {
padding: 0.8em;
}
}
/* Styling the toggle menu link and hiding it */
.nav .navtoogle{
display: none;
width: 100%;
padding: 0.5em 0.5em 0.8em;
font-family: 'Lato',Calibri,Arial,sans-serif;
font-weight: normal;
text-align: left;
color: #ffffff;
font-size: 1.2em;
background: #292929;
border: none;
border-bottom: 2px solid #EC572C;
cursor: pointer;
}
.icon-menu {
position: relative;
top: 3px;
line-height: 0;
font-size: 1.6em;
}
@media (max-width: 768px) {
#nav-menu{
background: #fff;
}
/* Unhiding the styled menu link */
.nav .navtoogle{
margin: 0;
display: block;
}
/* Animating the height of the navigation when the button is clicked */
/* When JavaScript is disabled, we hide the menu */
.no-js .nav ul {
max-height: 30em;
overflow: hidden;
}
/* When JavaScript is enabled, we hide the menu */
.js .nav ul {
max-height: 0em;
overflow: hidden;
}
/* Displaying the menu when the user has clicked on the button*/
.js .nav .active + ul {
max-height: 30em;
overflow: hidden;
-webkit-transition: max-height .4s;
-moz-transition: max-height .4s;
-o-transition: max-height .4s;
-ms-transition: max-height .4s;
transition: max-height .4s;
}
/* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/
.nav li span {
display: inline-block;
height: 100%;
}
.nav a {
padding: 0.5em;
}
.icon + span {
margin-left: 1em;
font-size: 0.8em;
}
/* Adding a left border of 8 px with a different color for each menu item*/
.nav li:nth-child(6n+1) {
border-left: 8px solid rgba(236,87,44,.9);
}
.nav li:nth-child(6n+2) {
border-left: 8px solid rgba(236,87,44,.8);
}
.nav li:nth-child(6n+3) {
border-left: 8px solid rgba(236,87,44,.7);
}
.nav li:nth-child(6n+4) {
border-left: 8px solid rgba(236,87,44,.6);
}
.nav li:nth-child(6n+5) {
border-left: 8px solid rgba(236,87,44,.5);
}
.nav li:nth-child(6n+6) {
border-left: 8px solid rgba(236,87,44,.4);
}
/* make the nav bigger on touch screens */
.touch .nav a {
padding: 0.8em;
}
}
About:
#team{
position: relative;
width: 100%;
background: url(../images/123.png) repeat;
overflow:hidden;
padding-top:90px;
padding-bottom:80px;
margin:0 auto;
}
#team1{
position: relative;
background:rgba(212,212,212,.8);
width: 220px;
height:380px;
margin:0 auto;
-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8);
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8);
box-shadow: inset 0 0 1px rgba(0,0,0,.8);
}
#team2{
position: relative;
background:rgba(212,212,212,.8);
width: 220px;
height:380px;
margin:0 auto;
-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8);
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8);
box-shadow: inset 0 0 1px rgba(0,0,0,.8);
}
#team3{
position: relative;
background:rgba(212,212,212,.8);
width: 220px;
height:380px;
margin:0 auto;
-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8);
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8);
box-shadow: inset 0 0 1px rgba(0,0,0,.8);
}
#team4{
position: relative;
background:rgba(212,212,212,.8);
width: 220px;
height:380px;
margin:0 auto;
-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8);
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8);
box-shadow: inset 0 0 1px rgba(0,0,0,.8);
}
.container11 {
position: relative;
width: 220px;
height: 220px;
-webkit-perspective: 1000;
-moz-perspective: 1000;
}
.card {
width: 220px;
height: 220px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.container11:hover .card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.profile {
position: absolute;margin:0 auto;
}
.profile .front {
}
.profile .back {
width: 220px;
height: 220px;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.profile img {
width: 220px;
height: 220px;
}
.front {
z-index: 10;
}
.container1:hover .front {
z-index: 0;
}
.info-profile{
position: absolute;
top:220px;
text-align:center;
width: 100%;
margin:0 auto;
}
.info-profile h6{
margin-left:20px;
margin-right:20px;
padding-top:20px;
border-bottom:1px solid rgba(0,0,0,.3);
}
.center{
position: absolute;
bottom:20px;
width:100%;
padding-top:10px;
margin:0 auto;
text-align: center;
height:22px;
}
.list-social li {
padding:0 4px 4px 0;
list-style: none;
margin:0 auto;
text-align: center;
display: inline-block;
}
.list-social li.icon-soc a {
font-family: 'FontAwesome';
font-size: 20px;
line-height: 22px;
color: #7a7a7a;
-webkit-transition : all 0.4s ease-out;
-moz-transition : all 0.4s ease-out;
-o-transition :all 0.4s ease-out;
transition : all 0.4s ease-out;
}
.list-social li.icon-soc a:hover {
color:#EC572C;
}
#office{
position:relative;
margin:0 auto;
width: 100%;
overflow:hidden;
}
#office img{
width:100%;
height:auto;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
#office img:hover{
opacity:.9;
cursor: crosshair;
}
#office h6{
position:absolute;
font-size:24px;
bottom:40px;
left:15px;
color:#fff;
font-weight: normal;
z-index:10;
}
#office p{
position:absolute;
font-size:14px;
bottom:5px;
left:15px;
color:#fff;
z-index:10;
}
#office span{
border-bottom:1px solid #ffffff;
padding-bottom:10px;
}
#left{
position: relative;
width:100%;
margin:0 auto;
text-align: left;
}
#left h6{
text-align: left;
}
.list-about li {
list-style: none;
margin:0 auto;
text-align: left;
padding-left:25px;
background: url('../images/checkmark.png') no-repeat center left;
}
.numb{
position:relative;
margin:0 auto;
width: 218px;
height:120px;
border:1px dotted #000;
overflow:hidden;
}
.numb .big-numb{
position:absolute;
width:100%;
top:5px;
text-align:center;
font-family: 'Montserrat', sans-serif;
line-height:72px;
font-size:72px;
font-weight:400;
color:#7a7a7a;
}
.numb .text-numb{
position:absolute;
width:100%;
top:80px;
text-align:center;
font-family: 'OpenSans-Light-webfont';
line-height:28px;
font-size:18px;
color:#7a7a7a;
}
.icon-numb{
width:28px;
font-family: 'FontAwesome';
line-height:28px;
font-size:20px;
color:#EC572C;
padding-right:10px;
}
C) Image Files - top
All the graphic elements for the entire theme are contained at the "images" folder.
D) JavaScript - top
All the pages link the neccessary js files inside the "head" tag of the document. If you need to modify the behavior from a certain jquery element open the "js" folder where you can alter the parameters of some of the js elements.
E) Sources and Credits - top
I've used the following images, icons or other files as listed.
JAVASCRIPT
FONTS
Once again, thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
IG_design